<template>
  <!-- 内容 -->
  <transition name="up">
    <div
      v-if="isVisible"
      class="showInfobox"
      @click="close"
      :style="{ left: props.left, top: props.top }"
    >
      我是弹出层组件
      <slot />
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted } from "vue";
// 因为将来 confirm 组件是以方法调用的形式展示,所以我们需要手动导入需要使用到的其他通用组件
//   import mButton from '@/libs/button/index.vue'

const props = defineProps({
  left: {
    type: String,
    default: "",
  },
  top: {
    type: String,
    default: "",
  },
});

// 控制显示处理
const isVisible = ref(false);
/**
 * confirm 展示
 */
const show = () => {
  isVisible.value = true;
};

/**
 * 处理动画 (render 函数的渲染，会直接进行)
 */
onMounted(() => {
  show();
});


// 关闭动画处理时间
const duration = "0.5s";
/**
 * 关闭事件,保留动画执行时长
 */
const close = () => {
  isVisible.value = false;
  // 延迟一段时间进行关闭
  setTimeout(() => {
    if (props.close) {
      props.close();
    }
  }, parseInt(duration.replace("0.", "").replace("s", "")) * 100);
};
</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all v-bind(duration);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all v-bind(duration);
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, -100%, 0);
}

.showInfobox {
  position: absolute;
  top: 200px;
  border: 1px solid #000;
  left: 50%;
  transform: translateX(-50%);
  background-color: red;
}
</style>
